<template>
  <div>
    <el-container>
      <el-aside width="200px"></el-aside>
      <el-main>
    <el-row>
      <el-col :span="24">
        <div>
          <el-row :gutter="20">

            <el-col :span="18"><div class="grid-content2 bg-purple2">
              <el-col :span="24">
                <div>
                  <el-row>
                    <el-col :span="12"><div class="grid-content6 bg-purple6">
                      <br>
                      <div class="demo-image" style="width: 420px">
                        <div class="block" :key="fit">
                          <span class="demonstration">{{ fit }}</span>
                          <el-image
                            style="width: 300px; height: 400px"
                            :src="url"
                            :fit="fit"></el-image>
                        </div>
                      </div>
                    </div></el-col>

                    <el-col :span="12"><div class="grid-content7 bg-purple-light7">
                      <br><br>
                      <font style="text-align: left" size="5px">歌单名</font><br><br>
                      <font style="text-align: left" size="5px">发布者</font><br><br>
                      <el-button type="primary">播放</el-button>

                      <el-button>收藏</el-button>
                      <el-button>分享</el-button>
                      <el-button>评论</el-button>
                      <br>
                      {{'标签'}}
                    </div></el-col>
                  </el-row>
                </div>
              </el-col>
              <div>
                <font style="text-align: left" size="7">歌曲列表</font>
                <el-divider></el-divider>

                <el-table
                  style="width: 100%"
                  max-height="800">
                  <el-table-column
                    fixed
                    prop="id"
                    label="序号"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="歌曲标题"
                    width="200">
                  </el-table-column>
                  <el-table-column
                    prop="timeNumber"
                    label="时长"
                    width="150">
                  </el-table-column>
                  <el-table-column
                    prop="auther"
                    label="歌手"
                    width="150">
                  </el-table-column>
                  <el-table-column
                    prop="cdName"
                    label="专辑"
                    width="150">
                  </el-table-column>

                </el-table>

              </div>
              <br> <br>
              查看更多内容，请下载客户端
              <br>
              <el-button type="danger" plain>立即下载</el-button>

            </div></el-col>
            <el-col :span="6"><div class="grid-content3 bg-purple3">
              <font style="text-align: left" size="4">喜欢这个歌单的人</font>
              <el-divider></el-divider>
              <el-col :span="24">
                <div>
                  <el-row gutter="20">
                    <el-col :span="10" v-for="(o, index) in 6" :key="o" :offset="index > 0 ? 2 : 2">
                      <el-card :body-style="{ padding: '0px' }">
                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                        <div style="padding: 1px;">
                          <div class="bottom clearfix">
                            <el-button type="text" class="button">操作按钮</el-button>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
              <font style="text-align: left" size="4">热门歌单</font>
              <el-divider style="border: red"></el-divider>
              <el-col :span="24">
                <div>
                  <el-row gutter="20">
                    <el-col :span="10" v-for="(o, index) in 6" :key="o" :offset="index > 0 ? 2 : 2">
                      <el-card :body-style="{ padding: '0px' }">
                        <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" class="image">
                        <div style="padding: 10px;">
                          <span>好吃的汉堡</span>
                          <div class="bottom clearfix">
                            <el-button type="text" class="button">操作按钮</el-button>
                          </div>
                        </div>
                      </el-card>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </div></el-col>

          </el-row>
        </div>
      </el-col>


    </el-row>
      </el-main>

      <el-aside width="200px"></el-aside>
    </el-container>
  </div>


</template>

<script>
export default {
  name: 'HelloWorld',

  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      fits: ['cover']
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-col {
  border-radius: 0px;
}
.bg-purple-dark {
  background: black;
  height: 100px;
}
.grid-content2 {
  height: 800px;
  background-color: white;
}
.grid-content3 {
  height: 800px;
  background-color: azure;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
  .bg-purple6 {
    height: 450px;
    width: 320px;
 /*   background-color: red;*/
  }
.bg-purple-light7{
  height: 500px;
 /* background-color: red;*/
}
</style>
